import React, { useEffect } from 'react';
import {
  Breadcrumb,
  Button,
  Checkbox,
  DatePicker,
  Form,
  Input,
  Switch,
  Table,
  Tabs,
} from 'antd';
import pub from '@/css/Tom/pub.less';
import style from '@/css/Tom/ShopPayment.less';

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

const formItemLayout = {
  labelCol: {
    xs: { span: 4 },
    sm: { span: 10 },
  },
  wrapperCol: {
    xs: { span: 10 },
    sm: { span: 18 },
  },
};
const config = {
  rules: [
    { type: 'object' as const, required: true, message: 'Please select time!' },
  ],
};
const rangeConfig = {
  rules: [
    { type: 'array' as const, required: true, message: 'Please select time!' },
  ],
};

const columns = [
  /*
  *    key: '1',
      order_number: 'fwesa123123',
      buyer_mes: {
        nickname: '谷粒多',
        name: '杨莉',
        phone: '17635232183',
        address: '上海市奉贤区海湾镇',
      },
      collection: '王翔',
      pay_type: '微信',
      price: 23.01,
      time: '2021-12-12 12:00',
  * */
  {
    title: '订单号',
    dataIndex: 'order_number',
    key: 'order_number',
  },
  {
    title: '买家信息',
    dataIndex: 'buyer_mes',
    key: 'buyer_mes',
    render(text: any, row: any, index: any) {
      console.log('啊看一下', text);
      const { address, name, phone, nickname } = text;
      return (
        <div style={{ textAlign: 'left' }}>
          <span>昵称：{nickname}</span>
          <br />
          <span>姓名：{name}</span>
          <br />
          <span>电话：{phone}</span>
          <br />
          <span>地址：&nbsp;&nbsp;&nbsp;{address}</span>
        </div>
      );
    },
  },
  {
    title: '收款人',
    dataIndex: 'collection',
    key: 'collection',
  },
  {
    title: '付款方式',
    dataIndex: 'pay_type',
    key: 'pay_type',
  },
  {
    title: '支付金额',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '日期',
    dataIndex: 'time',
    key: 'time',
  },
];

const data = [
  {
    key: '1',
    order_number: 'fwesa123123',
    buyer_mes: {
      nickname: '谷粒多',
      name: '杨莉',
      phone: '17635232183',
      address: '上海市奉贤区海湾镇',
    },
    collection: '王翔',
    pay_type: '微信',
    price: 23.01,
    time: '2021-12-12 12:00',
  },
  {
    key: '2',
    order_number: 'fwesa123123',
    buyer_mes: {
      nickname: '谷粒多',
      name: '杨莉',
      phone: '17635232183',
      address: '上海市奉贤区海湾镇',
    },
    collection: '王翔',
    pay_type: '微信',
    price: 23.01,
    time: '2021-12-12 12:00',
  },
];

function ShopPayment(props: any) {
  const { name, path } = props.route;
  const rot = [
    { name: '首页', path: '/' },
    { name: '门店', path: '/storeAllStore' },
    { name: name, path: path },
  ];
  const ref = React.createRef();
  useEffect(() => {
    // Update the document title using the browser API
    console.log(123123);
  }, []);

  function callback(key: any) {
    console.log(key);
  }

  function onChange(e: any) {
    if (!e.target.checked) {
      ref.current.style.color = '#686A6E';
    } else {
      ref.current.style.color = '#9BCCFF';
    }
    console.log(`checked = ${e.target.checked}`);
  }

  function onChanges(checked: any) {
    console.log(`switch to ${checked}`);
  }

  return (
    <div>
      <Breadcrumb>
        {rot.map((e) => (
          <Breadcrumb.Item key={e.name}>
            <a href={e.path}>{e.name}</a>
          </Breadcrumb.Item>
        ))}
      </Breadcrumb>
      <div className={pub.put_top}>{name}x</div>
      <div className={style.box}>
        <Tabs defaultActiveKey="2" onChange={callback}>
          <TabPane tab="设置" key="1">
            <p
              style={{
                fontSize: '1em',
                fontWeight: 'bold',
                color: '#686A6E',
                display: 'inline-block',
                marginLeft: '2em',
                marginRight: '1em',
              }}
            >
              开启到店支付
            </p>
            <Switch defaultChecked onChange={onChanges} />
            <br />
            <span
              style={{
                marginLeft: '6em',
                fontWeight: 'bold',
                color: '#76787B',
              }}
            >
              收款方式{' '}
            </span>
            <Checkbox onChange={onChange}>
              <p ref={ref} style={{ color: '#686A6E', fontSize: '0.6em' }}>
                门店扫码
              </p>
            </Checkbox>
          </TabPane>
          <TabPane tab="收款列表" key="2">
            <div className={style.top}>
              <TimeRelatedForm />
            </div>
            <div className={style.list_center}>
              <Table columns={columns} dataSource={data} />
            </div>
          </TabPane>
        </Tabs>
      </div>
    </div>
  );
}

const TimeRelatedForm = () => {
  const onFinish = (fieldsValue: any) => {
    const rangeValue = fieldsValue['picker'];
    const values = {
      ...fieldsValue,
      picker: [
        rangeValue[0].format('YYYY-MM-DD'),
        rangeValue[1].format('YYYY-MM-DD'),
      ],
    };
    console.log(values);
  };

  return (
    <Form
      style={style.list}
      name="time_related_controls"
      {...formItemLayout}
      onFinish={onFinish}
    >
      <Form.Item name="picker" {...rangeConfig}>
        <RangePicker />
      </Form.Item>
      <Form.Item name="person">
        <Input placeholder="请输入收货人" />
      </Form.Item>
      <Form.Item name="order_num">
        <Input placeholder="请输入订单号" />
      </Form.Item>

      <Form.Item
        wrapperCol={{
          xs: { span: 24, offset: 0 },
          sm: { span: 16, offset: 8 },
        }}
      >
        <Button size="small" type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};
export default ShopPayment;
